<template>
  <div>
    <a target="_blank" href="./html/EgIndex1.html">AJAX的基本介绍</a>
    <button id="btn1">发送get </button>
    <button id="btn2">发送post </button>
    <button id="btn3">请求延时处理</button>
    <hr>
    <button id="btnsend4">发送</button>
    <button id="btncls4">消息发送</button>
    <hr>
    <p>重复请求问题</p>
    <button id="btn5">请求延时处理</button>
    <hr>
    <p>axios</p>
    <button @click="send6_1">Axios的get请求</button>
    <ul>
      <li v-for="(item,index) in list6" :key="index">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      btn: "",
      isSending: false,
      list6:[]
    };
  },
  mounted() {
    this.send1();
    this.send2();
    this.send3();
    this.send4()
    this.send5()
  },
  methods: {
    send1() {
      const btn = document.getElementById("btn1");
      btn.onclick = function () {
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化，设置请求方法和url
        // xhr.open("GET", "http://localhost:8080/api/get_user_list");
        xhr.open("GET", "http://localhost:8000/get_user_list");
        // 3. 发送
        xhr.send();
        // on when 当...时候
        /* 
                readystate 是 xhr 对象中的属性，表示状态0、1、2、3、4
                0：被初始化
                1：open函数调用完毕
                2：send函数调用完毕
                3：服务端返回了部分结果
                4：服务端返回了所有结果
                // change 改变的时候触发
            */
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              console.log("响应状态码：", xhr.status);
              console.log("响应状态字符串：", xhr.statusText);
              console.log("响应头：", xhr.getAllResponseHeaders());
              console.log("响应体：", xhr.response);
            }
          }
        };
      };
    },
    send2() {
      const btn = document.getElementById("btn2");
      btn.onclick = function () {
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化，设置请求方法和url
        xhr.open("POST", "http://localhost:8000/user_register");
        // 3. 发送
        xhr.send();
        // on when 当...时候
        /* 
                readystate 是 xhr 对象中的属性，表示状态0、1、2、3、4
                0：被初始化
                1：open函数调用完毕
                2：send函数调用完毕
                3：服务端返回了部分结果
                4：服务端返回了所有结果
                // change 改变的时候触发
            */
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              console.log("响应状态码：", xhr.status);
              console.log("响应状态字符串：", xhr.statusText);
              console.log("响应头：", xhr.getAllResponseHeaders());
              console.log("响应体：", xhr.response);
            }
          }
        };
      };
    },
    send3(){
      const btn = document.getElementById('btn3')
      btn.onclick = function() {
        // 创建对象
        const xhr = new XMLHttpRequest();

        // 设置超时
        xhr.timeout = 2000
        // 超时回调
        xhr.ontimeout = function(){
          alert("请求超时，请稍后重试！！！")
        }

        // 网络异常回调
        xhr.onerror = function(){
          alert('网络异常，请稍后重试！！！')
        }

        // 初始化，并设置url
        xhr.open('GET','http://localhost:8080/api/getDelay');
        // 发送请求
        xhr.send()
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              console.log("响应状态码：", xhr.status);
              console.log("响应状态字符串：", xhr.statusText);
              console.log("响应头：", xhr.getAllResponseHeaders());
              console.log("响应体：", xhr.response);
            }
          }
        };

      }
    },
    send4(){
      const btnsend4 = document.getElementById('btnsend4')
      const btncls4 = document.getElementById('btncls4')
      let xhr = null
      // 发送请求
      btnsend4.onclick = function(){
        console.log("发送222");
        xhr = new XMLHttpRequest();
        // 设置超时
        xhr.timeout = 2000
        // 超时回调
        xhr.ontimeout = function(){
          alert("请求超时，请稍后重试！！！")
        }
        xhr.open('GET','http://localhost:8080/api/getDelay')
        xhr.send()
        xhr.onreadystatechange = function(){
          if (xhr.readyState === 4){
            if (xhr.status >= 200 && xhr.status < 300) {
              console.log("结果==",xhr.response);
            }
          }
        }
      }

      // 取消请求
      btncls4.onclick = function() {
        console.log("取消");
        xhr.abort()
      }

    },
    send5(){
      const btn = document.getElementById('btn5')
      let xhr = null
      btn.onclick = function() {
        if (this.isSending) {
          xhr.abort() // 如果正在发送，则取消请求
        }
        // 创建对象
         xhr = new XMLHttpRequest();
        this.isSending = true

        // 初始化，并设置url
        xhr.open('GET','http://localhost:8080/api/getDelay');
        // 发送请求
        xhr.send()
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            this.isSending = false
            if (xhr.status >= 200 && xhr.status < 300) {
            console.log("响应体：", xhr.response);
            }
          }
        };

      }
    },

    send6_1(){
      // 配置baseURL
      axios.defaults.baseURL = 'http://localhost:8080/api/'
      // axios.get('/get_user_list').then(res => {
      // axios.get('http://localhost:8080/api/get_user_list').then(res => {
      axios.get('get_user_list',{
        //url 参数
        params:{
          vip:'李白',
          id: 123
        },
        // 配置头参数信息
        headers:{
          name: 'hmgdcr',
          age: 22
        }
      }).then(res => {
        console.log("请求成功:",res);
        this.list6 = res.data.data
      }).catch(err => {
        console.log("请求失败:",err);
      })
    }

  },
};
</script>